<template>
    <div class="tables-con">
        <!-- table1 -->
        <div class="tables">
        <loading v-if="load"/>
        <table class="table table-hover" v-if="tablesData">
            <thead>
                <tr>
                    <th colspan="2" style="text-align: center">交易详情</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Version</th>
                    <td>{{tablesData.Version}}</td>
                </tr>
                <tr>
                    <th>Hash</th>
                    <td>{{tablesData.Hash}}</td>
                </tr>
                <tr>
                    <th>BlockNumber</th>
                    <td>{{tablesData.BlockNumber}}</td>
                </tr>
                <tr>
                    <th>BlockHash</th>
                    <td>{{tablesData.BlockHash}}</td>
                </tr>
                <tr>
                    <th>TxIndex</th>
                    <td>{{tablesData.TxIndex}}</td>
                </tr>
                <tr>
                    <th>From</th>
                    <td>{{tablesData.From}}</td>
                </tr>
                <tr>
                    <th>To</th>
                    <td>{{tablesData.To}}</td>
                </tr>
                <tr>
                    <th>Amount</th>
                    <td>{{tablesData.Amount}}</td>
                </tr>
                <tr>
                    <th>Timestamp</th>
                    <td>{{tablesData.Timestamp}}</td>
                </tr>
                <tr>
                    <th>Nonce</th>
                    <td>{{tablesData.Nonce}}</td>
                </tr>
                <tr>
                    <th>ExecuteTime</th>
                    <td>{{tablesData.ExecuteTime}}</td>
                </tr>
                <tr>
                    <th>Payload</th>
                    <td>{{tablesData.Payload}}</td>
                </tr>
                <tr>
                    <th>Invalid</th>
                    <td>{{tablesData.Invalid}}</td>
                </tr>
                <tr>
                    <th>InvalidMsg</th>
                    <td>{{tablesData.InvalidMsg}}</td>
                </tr>
            </tbody>
        </table>

        </div>
        <!-- table1 end -->
    </div>
</template>

<script>
import loading from './loading.vue'
export default {
    data: function () {
        return {
            load: true,
            hashId: this.$route.params.id,
            tablesData: null
        }
    },
    methods: {
        getHashDetail: function () {
            this.$http.get("/api/block/query",{
                params:{
                    type: "hash",
                    value: this.hashId
                }
            }).then(data => {
                setTimeout(() => {
                    this.tablesData = data.body.Transaction;
                    this.load = false;
                }, 500);
                
            }, err => {
                alert("获取数据出错<br>" + err.massage)
            })
        }
    },
    created: function () {
        this.getHashDetail()
        console.log(this.tablesData)
    }, 
    filters:{
        formatDate: function (val) {
            return new Date(parseInt(val)/1000/1000).toLocaleString(); 
        }
    },
    components: {
        'loading': loading
    }
}
</script>

<style>
.tables-con{
    width: 1000px;
    overflow: hidden;
    margin: 30px auto; 
}
</style>
